<style scoped>
.phone {
  background-color: #f1f1f1;
  padding-right: 20px;
  position: relative;
}
.phoneBox {
 
  overflow: hidden;
  background-color: #fff;
  border-radius: 50px;
  
  height: 810px;
}
.phonewrap{
  height: 810px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -20px;
}
.phoneBottom{
  position: absolute;
  left: 0;
  right: 20px;
  bottom: 0;
  background: #fff;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
.phoneNav img{
  display: block;
  width: 100%;
}
.liuhai {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 0;
  height: 40px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: #fff;
  z-index: 50;
}
.addSlide {
  display: flex;
  display: -webkit-flex;
  margin: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.slideLeft,
.slideRight {
  width: 50%;
  box-sizing: border-box;
}
.slide {
  padding: 0 5px;
  position: relative;
}
.slide1 .img {
  height: 120px;
}
.slide2 .img,
.slide5 .img {
  /* padding-left: 5px; */
  height: 135px;
}
.slide3 .img,
.slide4 .img {
  /* padding-left: 5px; */
  height: 150px;
}
.slide3,
.slide4 {
  width: 50%;
  margin-top: 5px;
  box-sizing: border-box;
  display: inline-block;
  float: left;
}
.slide3 {
  /* padding-right: 5px; */
}
.slide4 {
  /* padding-left: 5px; */
}
.slide5 {
  margin-top: 5px;
  box-sizing: border-box;
  display: inline-block;
}
.img {
  width: 100%;
  border-radius: 3px;
}
.resetBtn {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  text-align: center;
  top: 0;
  left: 5px;
  right: 5px;
  padding: 5px 0;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
}
.hot {
  margin-bottom: 50px;
}
.hotTitle {
  margin-top: 10px;
  margin-bottom: 5px;
  /* background-color: #EEE; */
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  border-top: 1px solid #eee;
}
.hotList {
  padding: 10px 10px;
  margin: 0 20px;
  background-color: #eef7ff;
  margin-bottom: 10px;
}
.xianzhong {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  overflow: hidden;
}
.xianImg {
  text-align: center;
}
.xianImg img {
  height: 30px;
}
.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 25px;
  line-height: 25px;
  color: #757677;
}
.center {
  text-align: center;
  color: #6c6c6c;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.center.active {
  color: #5ba4e9;
}
.wraper {
  padding: 0 20px;
  margin-bottom: 30px;
}

.search {
  padding-bottom: 20px;
}

.search span {
  color: #68777c;
  font-weight: bold;
  padding-right: 18px;
}

.search button {
  background-color: #00a8f7;
  color: #fff;
  margin-left: 8px;
}

.top {
  margin-bottom: 20px;
  border-top: 1px dashed #cccccc;
}

.wraper .headline {
  position: relative;
  font-size: 12px;
  color: #303134;
  font-weight: bold;
  margin: 10px 0;
  line-height: 32px;
}

.wraper .add-agent {
  position: absolute;
  top: 0px;
  right: 30px;
  background-color: #348bf2;
  color: #fff;
}

.iconfont {
  font-size: 14px;
}

.red-font {
  color: #ff1f1f;
}

.fixed-bottom {
  position: absolute;
  bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
  height: 80px;
  line-height: normal !important;
  /* left: 210px; */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide {
  left: 75px;
}

/* 表格样式 start*/

.pro-card {
  margin-bottom: 10px;
}

.pro-card-head {
  background-color: #e6e7eb;
  line-height: 38px;
  border: 1px solid #ddd;
}

.pro-card-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 20px;
}

.pro-card-headr {
  padding-right: 10px;
  text-align: right;
}

.pro-card-content {
  clear: both;
}

.pro-paramname {
  text-align: center;
  background-color: #e6e7eb;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #ddd;
}

.pro-paramvalue {
  padding-left: 10px;
  border-right: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pro-card-contentrow {
  line-height: 40px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 表格样式  end */

/* 分页 start */

.page {
  margin: 0;
}

.ivu-page {
  padding-bottom: 150px;
}

.wu.common-box-body .ivu-form-item {
  padding-right: 0;
  margin-bottom: 15px;
}
/* 分页 end */

.iconclass {
  display: inline-block;
  width: 58px;
  background: #fff;
  border: 1px dashed #757f98;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  height: 58px;
  line-height: 58px;
  vertical-align: middle;
  margin-left: 8px;
  margin-right: 15px;
}
.cropper-wrapper {
  margin-top: 10px;
  height: 400px;
}
.cropper-box {
  height: 300px;
}
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 20px 10px 0px 0px;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #50bfff;
  border-color: #50bfff;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}
.policy-manage {
  position: relative;
  height: 810px;
}
</style>
<style>
.phoneSlide .ivu-carousel-list {
  border-radius: 50px 50px 0 0 !important;
  overflow: hidden !important;
}
.a-link {
  color: #4074e1;
  text-decoration: underline;
  cursor: pointer;
}
.lunbo .ivu-modal-body {
  padding: 15px 20px 0 20px;
}
.lunbo .ivu-modal-content {
  border-radius: 3px;
}
</style>

<template>
    <div>
        <Row>
            <i-col span="6" class="phone">
                <div class="phoneBox" >
                  <div class="phonewrap">
                    <div class="liuhai"></div>
                    <div class="phoneSlide" >
                            <Carousel :height="200" loop v-model="carousel_index" autoplay >
                                  <CarouselItem  v-for="item in bannerList" :key="item">
                                      <div class="demo-carousel"><img :src="item" alt="" ></div>
                                  </CarouselItem>
                                  <!-- <CarouselItem>
                                      <div class="demo-carousel"><img src="http://kuaibao-imgs.oss-cn-hangzhou.aliyuncs.com/%E4%B8%89%E6%9C%88%E4%B8%BB%E9%A2%981.png" alt="" ></div>
                                  </CarouselItem> -->
                              </Carousel>
                    </div>
                    <div style="border-radius:50px;">
                        <div style="background-color:#FFF;" class="phoneNav">
                            <img src="../../asset/img/phone_nav.jpg">
                        </div>
                        <div class="addSlide">
                            <div class="slideLeft">                              
                                <div class="slide1 slide">
                                  <img :src="appList.hasOwnProperty(0)&&appList[0].hasOwnProperty('pic_url')?appList[0].pic_url:'http://kuaibao-imgs.oss-cn-hangzhou.aliyuncs.com/%E4%B8%89%E6%9C%88%E4%B8%BB%E9%A2%981.png'" alt="" class="img">
                                  <span class="resetBtn" v-if="$isShow('app_layout/store')"  @click="xiugai(1)">修改</span>
                                </div>
                                <div class="slide3 slide">
                                  <img :src="appList.hasOwnProperty(2)&&appList[2].hasOwnProperty('pic_url')?appList[2].pic_url:'http://kuaibao-imgs.oss-cn-hangzhou.aliyuncs.com/%E4%B8%89%E6%9C%88%E4%B8%BB%E9%A2%981.png'" alt="" class="img">
                                  <span class="resetBtn" v-if="$isShow('app_layout/store')"  @click="xiugai(3)">修改</span>
                                </div>
                                <div class="slide4 slide">
                                  <img :src="appList.hasOwnProperty(3)&&appList[3].hasOwnProperty('pic_url')?appList[3].pic_url:'http://kuaibao-imgs.oss-cn-hangzhou.aliyuncs.com/%E4%B8%89%E6%9C%88%E4%B8%BB%E9%A2%981.png'" alt="" class="img">
                                  <span class="resetBtn" v-if="$isShow('app_layout/store')"  @click="xiugai(4)">修改</span>
                                </div>  
                            </div>
                            <div class="slideRight">
                                <div class="slide2 slide"><img :src="appList.hasOwnProperty(1)&&appList[1].hasOwnProperty('pic_url')?appList[1].pic_url:'http://kuaibao-imgs.oss-cn-hangzhou.aliyuncs.com/%E4%B8%89%E6%9C%88%E4%B8%BB%E9%A2%981.png'" alt="" class="img"><span class="resetBtn" v-if="$isShow('app_layout/store')" @click="xiugai(2)">修改</span></div>
                                <div class="slide5 slide"><img :src="appList.hasOwnProperty(4)&&appList[4].hasOwnProperty('pic_url')?appList[4].pic_url:'http://kuaibao-imgs.oss-cn-hangzhou.aliyuncs.com/%E4%B8%89%E6%9C%88%E4%B8%BB%E9%A2%981.png'" alt="" class="img"><span class="resetBtn" v-if="$isShow('app_layout/store')" @click="xiugai(5)">修改</span></div>
                            </div>
                        </div>
                        <div class="hot">
                            <div class="hotTitle">
                                热卖推荐
                            </div>
                            <div class="hotList" v-for="item in leftRecPro" :key="item._id">
                                <Row>
                                    <i-col span="24" class="xianzhong">
                                        <h4>{{item.pname}}</h4>
                                    </i-col>
                                </Row>
                                <Row>
                                  <i-col span="12" v-for="sitem in item.attr" :key="sitem.key">
                                    <Row>
                                      <i-col span="10">
                                          <div class="content" >
                                            {{sitem.key}}
                                          </div>
                                      </i-col>
                                      <i-col span="14" class="content">
                                          {{sitem.value}}
                                      </i-col>
                                    </Row>
                                  </i-col>    
                                </Row>
                            </div>
                        </div>                       
                    </div>
                  </div>
                  
                </div>
                <div class="phoneBottom">
                  <Row>
                      <i-col span="6" class="center active">首页</i-col>
                      <i-col span="6" class="center">产品</i-col>
                      <i-col span="6" class="center">发现</i-col>
                      <i-col span="6" class="center">我的</i-col>
                  </Row>
                </div>
            </i-col>
            <i-col span="18">
                    <div class="policy-manage">
                        <productTitle></productTitle>
                        
                        <div class="wraper">
                            <Tabs type="card" @on-click="tabChange($event)" :animated="false">
                                <TabPane label="轮播图管理" name="banner">
                                    <div class="pro-con-f common-box-body">
                                        <Row>
                                                <Col span="24" class="table-action" >
                                                    <Button v-if="$isShow('banner/create')" type="success" size="large" class="fr" icon="plus" @click="add">新增</Button>
                                                </Col>  
                                        </Row>
                                    </div>
                                    <div class="detail">
                                        <div class="clearfix">
                                            <div class="table-theme highlight_table">
                                                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns1" :data="policylist" class=""></Table>
                                            </div>                        
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane label="推荐险种管理" name="pro">
                                    <div class="pro-con-f common-box-body">
                                        <Row>
                                                <Col span="24" class="table-action" >
                                                    <Button v-if="$isShow('app_recomment/create')" type="success" size="large" @click="openProModal" class="fr" icon="plus" >新增推荐险种</Button>
                                                </Col>
                                        </Row>
                                    </div>
                                    <div class="detail">
                                        <div class="clearfix">
                                            <div class="table-theme highlight_table">
                                                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns2" :data="tablepro" class=""></Table>
                                            </div>                        
                                        </div>
                                    </div>
                                </TabPane>
                            </Tabs>    
                            
                        </div>
                        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                            <Row class="pro-pagesize">
                                <Col :md="24" :lg="16" v-if="tabtag == 'banner'">
                                    <Button v-if="$isShow('banner/update')" type="primary" :disabled="tableaction"  size="large" class="fl mr10" @click="update">编辑</Button>
                                    <Button v-if="$isShow('banner/del')" type="error" :disabled="tableaction"  size="large" class="fl mr10 " @click="policyDel">删除</Button>
                                    <Button type="success" :disabled="tableaction" size="large" class="fl mr10" v-if="currentRow.status==0&&$isShow('banner/putaway')" @click="topOrBottom">上架</Button>
                                    <Button type="warning" :disabled="tableaction"  size="large" class="fl mr10" v-if="currentRow.status==1&&$isShow('banner/putaway')" @click="topOrBottom">下架</Button>
                                </Col>
                                <Col :md="24" :lg="16" v-else>
                                    <Button v-if="$isShow('app_recomment/update')" type="primary" :disabled="tableaction"  size="large" class="fl mr10" @click="proUpdate">编辑</Button>
                                    <Button v-if="$isShow('app_recomment/del')" type="error" :disabled="tableaction"  size="large" class="fl mr10 " @click="proDel">删除</Button>
                                    <Button type="success" :disabled="tableaction" size="large" class="fl mr10" v-if="currentRow.status != 1&&$isShow('app_recomment/putaway')" @click="proOnline">上架</Button>
                                    <Button type="warning" :disabled="tableaction"  size="large" class="fl mr10" v-if="currentRow.status == 1&&$isShow('app_recomment/putaway')" @click="proOnline">下架</Button>
                                </Col>
                                <Col :md="24" :lg="8" class="tRight">
                                    <Page ref="pages"  :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                                </Col>
                            </Row>
                        </div>
                        <Modal
                        v-model="modal1"
                        title="新增轮播图"
                        okText="提交"
                        :loading="modalLoading1"
                        @on-ok="submit"
                        @on-cancel="back"
                        width="440px"
                        :mask-closable = 'false'
                        :closable = "false"
                        class="lunbo"
                        >
                        <div class="common-box-body wu" >
                            <Form :model="form" ref="form" :rules="formValidate">
                                <Row>
                                    <i-col span="24">
                                        <FormItem label="名称" prop="name">
                                            <i-input v-model="form.name" placeholder="选择输入名称"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col span="24">
                                        <FormItem  label="类型" prop="type">
                                                <Select v-model="form.type"  placeholder="选择类型" transfer @on-change="typeChange">  
                                                    <i-option value="产品">产品</i-option>               
                                                    <i-option value="资讯">资讯</i-option>
                                                </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>  
                                <Row>
                                    <i-col span="24">
                                        <FormItem prop="pid">
                                            <Select v-model="form.pid"  placeholder="请选择" transfer filterable> 
                                                <i-option :value="item.id" :key="item.id" v-for="item in pidList">{{item.name}}</i-option> 
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row  class="mb7">
                                            <i-col span="2" style="font-size:14px;" class="pt8">图片</i-col>
                                            <i-col span="5"  class="pointer">
                                                <input type="file" id="imgAdd" style="display:none;">
                                                <span class="iconclass pointer" @click="inputFile">
                                                    <Icon  type="camera" size="20"></Icon>
                                                    <img   width="58" height="58"/>
                                                </span>
                                            </i-col>
                                            <i-col span="4" style="line-height:normal;color:#D0D0D0;" class="pt10">
                                                注释大小<br/>
                                                750*376
                                            </i-col>
                                            <i-col span="13">
                                                <span style="display:inline-block">
                                                    <img :src="form.pic?form.pic:''" style="height:66px;width:71px;">
                                                </span>
                                            </i-col>
                                </Row>
                                <Row>
                                    <i-col span="24">
                                        <FormItem  label="状态" prop="status">
                                                <Select v-model="form.status"  placeholder="请选择状态" transfer>  
                                                    <i-option value="1">上架</i-option>               
                                                    <i-option value="0">下架</i-option>               
                                                </Select>
                                        </FormItem>
                                    </i-col>
                                </Row> 
                                <Row>
                                    <i-col span="24">
                                        <FormItem  label="排序" prop="px">
                                                <i-input v-model="form.px" placeholder="请输入序号"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row> 
                            </Form>
                        </div>
                        
                    </Modal>
                    <Modal
                        v-model="modal3"
                        title="修改轮播图"
                        okText="提交"
                        @on-ok="updateLunBo"
                        :loading="modalLoading3"
                        @on-cancel="back"
                        width="440px"
                        :mask-closable = 'false'
                        class="lunbo"
                        >
                        <div class="common-box-body wu" >
                            <Form :model="form" ref="form" :rules="formValidate">
                                <Row>
                                    <i-col span="24">
                                        <FormItem label="名称" prop="name">
                                            <i-input v-model="form.name" placeholder="选择输入名称"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row>
                                    <i-col span="24">
                                        <FormItem  label="类型" prop="type">
                                                <Select v-model="form.type"  placeholder="选择类型" transfer @on-change="typeChange">  
                                                    <i-option value="产品">产品</i-option>               
                                                    <i-option value="资讯">资讯</i-option>
                                                </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>  
                                <Row>
                                    <i-col span="24">
                                        <FormItem prop="pid">
                                            <Select v-model="form.pid"  placeholder="请选择" transfer filterable> 
                                                <i-option :value="item.id" :key="item.id" v-for="item in pidList">{{item.name}}</i-option> 
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row  class="mb7">
                                            <i-col span="2" style="font-size:14px;" class="pt8">图片</i-col>
                                            <i-col span="5"  class="pointer">
                                                <input type="file" id="imgAdd" style="display:none;">
                                                <span class="iconclass pointer" @click="inputFile">
                                                    <Icon  type="camera" size="20"></Icon>
                                                    <img   width="58" height="58"/>
                                                </span>
                                            </i-col>
                                            <i-col span="4" style="line-height:normal;color:#D0D0D0;" class="pt10">
                                                注释大小<br/>
                                                750*376
                                            </i-col>
                                            <i-col span="13">
                                                <span style="display:inline-block">
                                                    <img :src="form.pic" style="height:66px;width:71px;">
                                                </span>
                                            </i-col>
                                </Row>
                                <Row>
                                    <i-col span="24">
                                        <FormItem  label="状态" prop="status">
                                                <Select v-model="form.status"  placeholder="请选择状态" transfer>  
                                                    <i-option value="1">上架</i-option>               
                                                    <i-option value="0">下架</i-option>               
                                                </Select>
                                        </FormItem>
                                    </i-col>
                                </Row> 
                                <Row>
                                    <i-col span="24">
                                        <FormItem  label="排序" prop="px">
                                                <i-input v-model="form.px" placeholder="请输入序号"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row> 
                            </Form>
                        </div>
                        
                    </Modal>
                        
                    </div>
            </i-col>
        </Row>
       
        
        
        <Modal v-model="modal5" title="模块内容修改" okText="提交" :loading="modalLoading5" @on-ok="appSubmit" @on-cancel="back" width="440px" :mask-closable = 'false' :closable = "false" class="lunbo">
            <div class="common-box-body wu" >
                            <Form :model="form5" ref="form5" :rules="formValidate5">
                                <Row>
                                    <i-col span="24">
                                        <FormItem label="位置" prop="position">
                                            <i-input v-model="form5.position"  disabled placeholder="选择输入名称"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row> 
                                <Row>
                                    <i-col span="24">
                                        <FormItem label="产品" prop="pid">
                                            <Select v-model="form5.pid"  placeholder="请选择" transfer filterable> 
                                                <i-option :value="item.id" :key="item.id" v-for="item in prolist">{{item.name}}</i-option> 
                                            </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>
                                <Row  class="mb7">
                                            <i-col span="2" style="font-size:14px;" class="pt8">图片</i-col>
                                            <i-col span="5"  class="pointer">
                                                <input type="file" id="imgAdd" style="display:none;">
                                                <span class="iconclass pointer" @click="inputFile">
                                                    <Icon  type="camera" size="20"></Icon>
                                                    <img   width="58" height="58"/>
                                                </span>
                                            </i-col>
                                            <i-col span="4" style="line-height:normal;color:#D0D0D0;" class="pt10">
                                                注释大小<br/>
                                                750*376
                                            </i-col>
                                            <i-col span="13">
                                                <span style="display:inline-block">
                                                    <img :src="form5.pic_url" style="height:66px;width:71px;">
                                                </span>
                                            </i-col>
                                </Row>
                                <!-- <Row>
                                    <i-col span="24">
                                        <FormItem  label="状态" prop="status">
                                                <Select v-model="form.status"  placeholder="请选择状态" transfer>  
                                                    <i-option value="1">上架</i-option>               
                                                    <i-option value="0">下架</i-option>               
                                                </Select>
                                        </FormItem>
                                    </i-col>
                                </Row>  -->
                                <!-- <Row>
                                    <i-col span="24">
                                        <FormItem  label="排序" prop="px">
                                                <i-input v-model="form.px" placeholder="请输入序号"></i-input>
                                        </FormItem>
                                    </i-col>
                                </Row>  -->
                            </Form>
                        </div>
        </Modal>
        <Modal v-model="proModal" title="推荐险种" okText="提交" :loading="modalLoading5" @on-ok="proSubmit" @on-cancel="proBack" width="500" :mask-closable = 'false' :closable = "false" class="lunbo">
            <div class="common-box-body wu" >
                <Form :model="proForm" ref="proForm">
                    <Row>
                        <i-col span="24">
                            <FormItem label="排序">
                              <i-input v-model="proForm.px"   placeholder="请输入排序"></i-input>
                            </FormItem>
                        </i-col>
                    </Row> 
                    <Row>
                        <i-col span="24">
                            <FormItem label="供应商" prop="pcid">
                                <Select v-model="proForm.pcid" @on-change="changeCid"  placeholder="请选择" transfer filterable> 
                                    <i-option :value="item.cid" :key="item.cid" v-for="item in parterList">{{item.name}}</i-option> 
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row> 
                    <Row>
                        <i-col span="24">
                            <FormItem label="产品" prop="pid">
                                <Select v-model="proForm.pid" label-in-value @on-change="pidChange" placeholder="请选择" transfer filterable> 
                                    <i-option :value="item.mongo_id" :key="item.mongo_id" v-for="item in recommendProlist">{{item.name}}</i-option> 
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span="24">
                            <FormItem  label="状态" prop="status">
                                    <Select v-model="proForm.status"  placeholder="请选择状态" transfer>  
                                        <i-option value="1">上架</i-option>               
                                        <i-option value="2">下架</i-option>               
                                    </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>     
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[0].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[0].value"   placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[1].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[1].value"   placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[2].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[2].value"   placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[3].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[3].value"  placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>                             
                    </Row> 
                </Form>
            </div>
        </Modal>
     <Modal v-model="modal2" width="1200" ok-text="上传图片" :loading="loading" @on-ok="uploadHeadimg" @on-cancel="cancel">
                        <Row class="cropper-wrapper">
                            <Col span="11" class="cropper-box">
                            <vueCropper
                                ref="cropper"
                                :img="headImg.img"
                                :outputSize="headImg.size"
                                :outputType="headImg.outputType"
                                :info="headImg.info"
                                :canScale="headImg.canScale"
                                :autoCrop="headImg.autoCrop"
                                :autoCropWidth="headImg.autoCropWidth"
                                :autoCropHeight="headImg.autoCropHeight"
                                :fixedBox="headImg.fixedBox"
                                :fixed="headImg.fixed"
                                :fixedNumber="headImg.fixedNumber"
                                @realTime="realTime"
                                @imgLoad="imgLoad"
                            ></vueCropper>
                            <label class="btn" for="upload2">打开图片</label>
                            <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
                            <!-- <button @click="finish2('base64')" class="btn">裁剪</button> -->
                            </Col>
                            <Col span="7" offset="1">
                            <!-- <img :src="formItem.headImg.demoimg" /> -->
                            <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden', 'margin': '5px'}">
                                <div :style="previews.div">
                                    <img :src="headImg.img" :style="previews.img">
                                </div>
                            </div>
                            </Col>
                        </Row>
        </Modal> 
    </div>
   
</template>
<script>
import productTitle from "../../components/productTitle";
import VueCropper from "vue-cropper";
import { getStsTokenWrite, getStsTokenRead } from "../../api/common";
import { create, get_list , update, get_detail,del,putaway, getAll , get_id} from '../../api/banner'
import { app_layout_store,appGetList} from '../../api/app_layout'
import { getComlistall } from '../../api/parter'
import { getListByCom } from '../../api/product'
import { app_recomment_create,app_recomment_get_list , app_recomment_update , app_recomment_del , app_recomment_get_detail , app_recomment_putaway , app_recomment_get_all} from '../../api/app_recomment'
export default {
  data() {
    return {
      leftRecPro:[],
      recomtag:0,
      proModal:false,
      proForm:{
        attr:[
          {
            key:'',
            value:''
          },
          {
            key:'',
            value:''
          },
          {
            key:'',
            value:''
          },
          {
            key:'',
            value:''
          },
        ],
      },
      recProList:[],
      recommendProlist:[],
      parterList:[],
      is_module:false,
      bannerList:[],
      appList:[],
      carousel_index:0,
      value1: 1,
      page: 1,
      pagesize: 10,
      listTotal: 0,
      modalLoading1: true,
      modalLoading3: true,
      modalLoading5: true,
      loading: true,
      searchForm: {
        p: 1,
        pagesize: 10,
        name: "",
        oid: "",
        status: "",
        insure_date: "",
        insure_datetime: "",
        appName: ""
      },
      modal1: false,
      modal2: false,
      modal3: false,
      form: {
        name: "",
        type: "",
        pid: "",
        px: 0,
        status: "1",
        pic: ""
      },
      proloading: false,
      tableloading: true,
      tableaction: true,
      currentRow: {},
      columns1: [
        {
          title: "序号",
          type: "index",
          width: "80",
          align: "center"
        },
        {
          title: "名称",
          key: "name",
          align: "center"
        },
        {
          title: "类型",
          key: "type",
          align: "center"
        },
        {
          title: "图片",
          key: "pic",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("img", {
                style: {
                  height: "50px"
                },
                attrs: {
                  src: params.row.pic
                }
              })
            ]);
          }
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.status == 1 ? "上架" : "下架");
          }
        },
        // {
        //     title: '排序',
        //     key: 'px',
        //     align:'center'
        // },
        {
          title: "创建时间",
          key: "create_timed",
          align: "center",
          // render: (h, params) => {
          //   return h(
          //     "div",
          //     new Date(params.row.create_timed.sec * 1000).toLocaleDateString()
          //   );
          // }
        }
      ],
      columns2:[
        {
          title: "排序",
          key: "px",
          width: "80",
          align: "center"
        },
        {
          title: "产品名称",
          key: "pname",
          align: "center"
        },
        {
          title: "说明",
          key: "attr",
          align: "center",
          render:(h,params) => {
            let _attr = params.row.attr
            let html = ''
            _attr.forEach((item)=>{
              html+=item.key+':'+item.value+'   '
            })
            return h("div",html);
          }
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            return h("div", params.row.status == 1 ? "上架" : "下架");
          }
        },
        {
          title: "创建时间",
          key: "create_timed",
          align: "center",
        }
      ],
      tabtag:'banner',
      tablepro:[],
      policylist: [],
      pidList: [],
      headImg: {
        img: "",
        info: true,
        size: 1,
        canScale: true,
        outputType: "jpeg",
        canMoveBox: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 398,
        autoCropHeight: 200,
        // 开启宽度和高度比例
        fixed: true,
        fixedBox: true,
        fixedNumber: [1.99, 1],
        demoimg: ""
      },
      previews: {},
      formValidate: {
        name: [
            { required: true, message: '名称不能为空', trigger: 'blur,change' }
        ],
        type: [
            { required: true, message: '类型不能为空', trigger: 'blur,change' }
        ],
        pid: [
            { required: true, message: '关联不能为空', trigger: 'blur,change' }
        ],
        status:[
            { required: true, message: '状态不能为空', trigger: 'blur,change' }
        ]
      },
      prolist:[],
      //首页模块
      modal5:false,
      form5:{
          position:'',
          pid:'',
          pic_url:'',
      },
      formValidate5: {},
    };
  },
  components: {
    productTitle,
    VueCropper
  },
  computed: {
    slidetoggle() {
      return this.$store.state.sildeshow;
    }
  },
  mounted() {
    this.getList();
    this.carouselGetList();
    this.getAllPro();
    this.getAllCom();
    this.getAllProOnline();
  },
  methods: {
    imgLoad (msg) {
			console.log(msg)
		},
    cancel(){
      document.getElementById("upload2").value  = ''
      this.$refs.cropper.refresh()
    },
    //获取全部上架推荐险种
    getAllProOnline(){
      new Promise((resolve, reject) => {
        app_recomment_get_all()
          .then(response => {
            if (response.data.err == 0) {
              this.leftRecPro = response.data.data
            } else {
              this.$Message.error(response.data.info);
              
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    //更新推荐险种
    proUpdate(){
      this.proGetDetail()
      this.proModal = true
      this.recomtag = 1
    },
    //获取推荐险种详情
    proGetDetail(){
      let _params = {
        id:this.currentRow._id
      }
      new Promise((resolve, reject) => {
            app_recomment_get_detail(_params)
              .then(response => {
                if (response.data.err == 0) {
                  this.proForm = response.data.data
                  this.proForm.pcid = parseInt(this.proForm.pcid) 
                  this.proForm.status = this.proForm.status.toString()
                } else {
                  this.$Message.error(response.data.info);
                  
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
    },
    proDel(){
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除该条信息?",
        onOk: () => {
          let _params = {
            id:this.currentRow._id
          }
          new Promise((resolve, reject) => {
            app_recomment_del(_params)
              .then(response => {
                if (response.data.err == 0) {
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
        }
      });
    },
    proOnline(){
      let params = {
        id: this.currentRow._id,
      };
      new Promise((resolve, reject) => {
        app_recomment_putaway(params)
          .then(response => {
            if (response.data.err == 0) {
              this.getRecomPro();
              this.tableaction = true;
              this.$Message.success(response.data.info);
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    tabChange(name){
      console.log(name)
      if(name == "pro"){
        this.tabtag = 'pro'
        this.getRecomPro()
      }else{
        this.tabtag = 'banner'
        this.getList();
      }
    },
    pidChange(item){
      if(item.label){
        this.proForm.pname = item.label
      }
    },
    getRecomPro(){
      this.tableloading = true
      let _params = {
        p:this.page,
        pagesize:this.pagesize
      }
      new Promise((resolve, reject) => {
        app_recomment_get_list(_params)
          .then(response => {
            if (response.data.err == 0) {
                this.tablepro = response.data.data.list
                this.listTotal = response.data.data.total
                this.getAllProOnline()
            } else {
              this.$Message.error(response.data.info);
              
            }
            this.tableloading = false
            resolve();
          })
          .catch(error => {
            reject(error);
          });
          this.tableloading = false
      });
      
    },
    getPro(id){
      if(id){
        let _params = {
          cid:id
        }
        new Promise((resolve, reject) => {
          getListByCom(_params)
            .then(response => {
              if (response.data.err == 0) {
                this.recommendProlist = response.data.data
              } else {
                this.$Message.error(response.data.info);
                
              }
              resolve();
            })
            .catch(error => {
              reject(error);
            });
        });
      } 
    },
    //改变供应商
    changeCid(value){
      this.getPro(value)
    },

    //获取全部供应商
    getAllCom(){ 
      new Promise((resolve, reject) => {
        getComlistall()
          .then(response => {
            if (response.data.err == 0) {
                this.parterList = response.data.data            
            } else {
              this.$Message.error(response.data.info);
              
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    proSubmit(){
      if(this.recomtag == 0){
        new Promise((resolve, reject) => {
          app_recomment_create(this.proForm)
              .then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.proModal = false  
                    this.$refs['proForm'].resetFields();
                    this.proForm = {
                      attr:[
                        {
                          key:'',
                          value:''
                        },
                        {
                          key:'',
                          value:''
                        },
                        {
                          key:'',
                          value:''
                        },
                        {
                          key:'',
                          value:''
                        },
                      ],
                    }
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  setTimeout(() => {
                      this.modalLoading5 = false
                  }, 2000);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
      }else{
        this.proForm.id = this.currentRow._id
        new Promise((resolve, reject) => {
          app_recomment_update(this.proForm)
              .then(response => {
                if (response.data.err == 0) {
                    this.$Message.success(response.data.info);
                    this.proModal = false  
                    this.$refs['proForm'].resetFields();
                    this.proForm = {
                      attr:[
                        {
                          key:'',
                          value:''
                        },
                        {
                          key:'',
                          value:''
                        },
                        {
                          key:'',
                          value:''
                        },
                        {
                          key:'',
                          value:''
                        },
                      ],
                    }
                    this.getRecomPro()
                } else {
                  this.$Message.error(response.data.info);
                  setTimeout(() => {
                      this.modalLoading5 = false
                  }, 2000);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
      }     
    },
    proBack(){

    },
    openProModal(){
      this.recomtag = 0
      this.proModal = true
      this.proForm = {
        attr:[
          {
            key:'',
            value:''
          },
          {
            key:'',
            value:''
          },
          {
            key:'',
            value:''
          },
          {
            key:'',
            value:''
          },
        ],
      }
    },
    //模块修改
    appSubmit(){     
      new Promise((resolve, reject) => {
        app_layout_store(this.form5)
          .then(response => {
            if (response.data.err == 0) {
                this.modal5 = false
                this.carouselGetList();                
            } else {
              this.$Message.error(response.data.info);
              this.$nextTick(() => {
                  this.modalLoading5 = fasle;
              });
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    getAllPro(){
      let _params = {
        type:'产品'
      }
      new Promise((resolve, reject) => {
        get_id(_params)
          .then(response => {
            if (response.data.err == 0) {
              this.prolist = response.data.data
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    compare(prop) {
      return function (obj1, obj2) {
          var val1 = obj1[prop];
          var val2 = obj2[prop];
          if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
              val1 = Number(val1);
              val2 = Number(val2);
          }
          if (val1 < val2) {
              return -1;
          } else if (val1 > val2) {
              return 1;
          } else {
              return 0;
          }            
      } 
    },
    //获取全部模块
    carouselGetList(){
      new Promise((resolve, reject) => {
        appGetList()
          .then(response => {
            if (response.data.err == 0) {
              let _tmplist = response.data.data
              
              this.appList = _tmplist.sort(this.compare('position'))
              
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    //获取上架轮播图
    bannerGetAll(){
      new Promise((resolve, reject) => {
        getAll()
          .then(response => {
            if (response.data.err == 0) {
              this.bannerList = response.data.data
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    //时间转换
    datachange(date, obj, param) {
      obj[param] = date;
    },
    tableCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow)
      this.tableaction = false;
      this.currentRow = currentRow;
    },
    // 搜索
    search() {},
    // 获取banner列表
    getList() {
      this.tableloading = true;
      let _params = {
        p:this.page,
        pagesize:this.pagesize
      }
      new Promise((resolve, reject) => {
        get_list(_params)
          .then(response => {
            if (response.data.err == 0) {
              this.policylist = response.data.data.list;
              this.listTotal = response.data.data.total;
              this.bannerGetAll();
              
            } else {
              this.$Message.error(response.data.info);
            }
            this.tableloading = false;
            resolve();
          })
          .catch(error => {
            this.tableloading = false;
            reject(error);
          });
      });
    },
    // 页码改变
    pageChange(page) {
      this.page = page;
      this.searchForm.p = page;
      if(this.tabtag == 'pro'){
        this.getRecomPro();
      }else{
        this.getList();
      }
      
    },
    // 每页条数改变
    pageSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.searchForm.pagesize = pagesize;
      this.getList();
    },
    del(param) {
      new Promise((resolve, reject) => {
        del(param)
          .then(response => {
            if (response.data.err == 0) {
              this.getList();
              this.$nextTick(() => {
                this.tableaction = true;
              });
              this.$Message.success(response.data.info);
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    // 删除时弹出对话框
    policyDel() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除该条信息?",
        onOk: () => {
          let _params = {
            id: this.currentRow.id
          };
          this.del(_params);
        }
      });
    },
    get_detail() {
      let params = {
        id: this.currentRow.id
      };
      new Promise((resolve, reject) => {
        get_detail(params)
          .then(response => {
            if (response.data.err == 0) {
              // this.getList();
              // this.$Message.success(response.data.info);
              this.form = response.data.data;
              this.form.status = response.data.data.status.toString();
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    add() {
      this.back();
      this.modal1 = true;
      this.headImg.fixedNumber =  [1.99, 1]
    },
    update() {
      this.modal3 = true;
      this.headImg.fixedNumber =  [1.99, 1]
      this.get_detail();
    },
    inputFile() {
      this.modal2 = true;
    },
    //上下架
    topOrBottom() {
      let params = {
        id: this.currentRow.id,
      };
      new Promise((resolve, reject) => {
        putaway(params)
          .then(response => {
            if (response.data.err == 0) {
              this.getList();
              this.tableaction = true;
              this.$Message.success(response.data.info);
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    //产品咨询改变
    typeChange() {
      if(this.form.type){
        let params = {
          type: this.form.type
        };
        new Promise((resolve, reject) => {
          get_id(params)
            .then(res => {
              if (res.data.err == 0) {
                this.pidList = [];
                this.pidList = res.data.data;
                if (res.data.data.list.length) {
                  this.form.pid = res.data.data.list[0].id;
                }
              } else {
                this.$Message.error(res.data.info);
              }
              resolve();
            })
            .catch(error => {
              reject(error);
            });
        });
      }  
    },
    submit() {
      new Promise((resolve, reject) => {
        create(this.form)
          .then(res => {
            if (res.data.err == 0) {
              this.modal1 = false;
              this.getList();
              this.$nextTick(() => {
                this.tableaction = true;
              });
            } else {
              if(res.data.err === 1201){
                this.$Message.error('请完善信息');
              }else{
                this.$Message.error(res.data.info);
              }
              let _this = this;
              setTimeout(() => {
                  this.modalLoading1 = false;
                  _this.$nextTick(() => {
                    _this.modalLoading1 = true;
                  });
              }, 1000);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    toBlob(urlData, fileType) {
      var bytes = window.atob(urlData),
        n = bytes.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bytes.charCodeAt(n);
      }
      return new Blob([u8arr], { type: fileType });
    },
    uploadHeadimg() {
      this.$refs.cropper.getCropData(data => {
        console.log(data)
        getStsTokenWrite().then(res => {
          if (res.data.err == 0) {
            let _this = this;
            var sts = res.data.data.Credentials;
            var client = new OSS.Wrapper({
              region: "oss-cn-hangzhou",
              accessKeyId: sts.AccessKeyId,
              accessKeySecret: sts.AccessKeySecret,
              stsToken: sts.SecurityToken,
              bucket: "kuaibao-imgs",
              secure: true, 
            });
            var base64 = data.split(",")[1];
            var fileType = data.split(";")[0].split(":")[1];

            // base64转blob
            var blob = this.toBlob(base64, fileType);
            // blob转arrayBuffer
            var reader = new FileReader();
            reader.readAsArrayBuffer(blob);

            // var files = this.files;
            const files = document.getElementById("upload2").files[0];
            reader.onload = function(event) {
              var buffer = new OSS.Buffer(event.target.result);
              //这里用 multipartUpload  上传会报错，所以更改为 put
              var _lastindex = files.name.lastIndexOf('.')
              var filename = files.name.slice(0,_lastindex) +'_'+ new Date().getTime() +files.name.slice(_lastindex)
              //var filename = files.name +'_'+ new Date().getTime()
              client.put(filename, buffer).then(results => {
                console.log(results);
                if (results.url) {
                  if(_this.is_module){
                    _this.form5.pic_url = results.url;
                    _this.is_module = false
                  }else{
                    _this.form.pic = results.url;
                  }
                  
                } else {
                  this.$Message.error("上传出错");
                }
              });
            };
          }
        });
      });
      this.modal2 = false;
      this.headImg.img = ''
    },
    realTime(data) {
      this.previews = data;
    },
    uploadImg(e) {
      console.log(e)
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      this.headImg.img = ''
      var reader = new FileReader();
      reader.onload = (e) => {
        console.log(e)
        this.headImg.img = e.target.result;
        this.$set(this.headImg,'img',e.target.result)  
      };
      reader.readAsDataURL(file);
    },
    back() {
      // this.form.name="";
      // this.form.type="";
      this.form.pid = "";
      this.form.px = 0;
      // this.form.status="1";
      this.form.pic = "";
      this.$refs["form"].resetFields();
    },
    updateLunBo() {
      new Promise((resolve, reject) => {
        update(this.form)
          .then(res => {
            if (res.data.err == 0) {
              this.modal3 = false;
              this.getList();
              this.$nextTick(() => {
                this.tableaction = true;
              });
            } else {
              this.$Message.error(res.data.info);
              let _this = this;
              setTimeout(() => {
                this.modalLoading3 = false;
                _this.$nextTick(() => {
                  _this.modalLoading3 = true;
                });
              }, 1000);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    xiugai(val){
      console.log(this.$refs)
        this.modal5 = true;
        if(val=='1'){
            this.headImg.fixedNumber =  [1.95, 1];
            //this.$set(this.headImg,'fixedNumber',[1.95, 1])
        }else if(val=='2'||val=='5'){
            this.headImg.fixedNumber =  [1.55, 1];
            //this.$set(this.headImg,'fixedNumber',[1.55, 1])
        }else{
            this.headImg.fixedNumber =  [0.65, 1];
            //this.$set(this.headImg,'fixedNumber',[0.65, 1])
        }
        if(this.appList[val-1]){
          this.form5 = Object.assign({},this.appList[val-1])
          this.headImg.img = this.form5.pic_url
          //this.$set(this.headImg,'img',this.form5.pic_url)
          this.is_module = true
        }else{
          this.form5 = {
            position:val,
            pid:'',
            pic_url:'',
          }
          this.headImg.img = ''
          this.is_module = true
        }
        
    }
  }
};
</script>

